<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS -->
    <link rel="stylesheet" href="../assets/css/style.css" />
    <!-- 图标 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <!-- 谷歌字体 -->

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <title>八班网站</title>
  </head>
  <body id="tpp">
    <!-- 标题 -->
    <header class="header" data-header>
      <div class="container">
        <a href="#" class="logo"
          ><img src="../assets/images/bg.jpg" loading="lazy" alt="logo"
        /></a>
        <h2 class="h2 banner">2022届8班</h2>
        <!-- 按钮 -->
        <button class="nav-toggle-btn" data-nav-toggle-btn>
          <ion-icon name="menu-outline" class="open"></ion-icon>
          <ion-icon name="close-outline" class="close"></ion-icon>
        </button>
        <nav class="navbar">
          <div class="container">
            <ul class="navbar-list">
              <li>
                <a href="#home" class="navbar-link" data-navbar-link>开始</a>
              </li>
              <li>
                <a href="#features" class="navbar-link" data-navbar-link
                  >回顾</a
                >
              </li>
              <li>
                <a href="#service" class="navbar-link" data-navbar-link>老师</a>
              </li>
              <li>
                <a href="#blog" class="navbar-link" data-navbar-link>大事记</a>
              </li>
              <li>
                <a href="#newsletter" class="navbar-link" data-navbar-link
                  >一封信</a
                >
              </li>
            </ul>
          </div>
        </nav>
        <a href="https://www.bilibili.com/video/BV1Qf4y1Z7cW/"
          ><button class="btn btn-primary">
            <span>我们毕业啦</span>
            <ion-icon name="chevron-forward-outline"></ion-icon></button
        ></a>
      </div>
    </header>

    <main>
      <article>
        <!-- HERO
        
        -->
        <section class="hero" id="home">
          <img
            src="../assets/images/shape1.png"
            alt="illustration art"
            class="shape shape-1"
          />
          <img
            src="../assets/images/shape2.png"
            alt="illustration art"
            class="shape shape-2"
          />
          <img
            src="../assets/images/shape3.png"
            alt="illustration art"
            class="shape shape-3"
          />
          <div class="container">
            <figure class="hero-banner">
              <img
                src="../assets/images/cover.jpg"
                alt="illustration art"
                loading="lazy"
                class="w-100"
              />
            </figure>
            <div class="hero-content">
              <h1 class="h1 hero-title">我们毕业啦</h1>
              <p class="section-text">
                2022年7月12日，位于东昌南校的我们中考结束啦！<br />
                只可惜，13日的毕业典礼却因疫情取消了……
              </p>
              <button class="btn btn-primary">
                <span>Get Started now</span>
                <ion-icon name="chevron-forward-outline"></ion-icon>
              </button>
            </div>
          </div>
        </section>

        <!-- FEATURES
        
        
        -
        -
        -->
        <section class="features" id="features">
          <p class="section-subtitle">回顾</p>
          <h2 class="h2 section-title">我们的初中生涯</h2>
          <ul class="features-list">
            <li>
              <div class="features-card">
                <div class="card-icon">
                  <img src="../assets/images/yuChu.jpg" alt="icon" />
                </div>
                <h3 class="h3 card-title">预初</h3>
                <p class="card-text">初中生活的开始</p>
                <a href="#" class="card-link">
                  <span>了解详情</span>
                  <ion-icon name="chevron-forward-outline"></ion-icon>
                </a>
              </div>
            </li>
            <li>
              <div class="features-card">
                <div class="card-icon">
                  <img src="../assets/images/chuYi.jpg" alt="icon" />
                </div>
                <h3 class="h3 card-title">初一</h3>
                <p class="card-text">疫情的突袭</p>
                <a href="#" class="card-link">
                  <span>了解详情</span>
                  <ion-icon name="chevron-forward-outline"></ion-icon>
                </a>
              </div>
            </li>
            <li>
              <div class="features-card">
                <div class="card-icon">
                  <img src="../assets/images/chuEr.jpg" alt="icon" />
                </div>
                <h3 class="h3 card-title">初二</h3>
                <p class="card-text">初中生活的高潮</p>
                <a href="#" class="card-link">
                  <span>了解详情</span>
                  <ion-icon name="chevron-forward-outline"></ion-icon>
                </a>
              </div>
            </li>
            <li>
              <div class="features-card">
                <div class="card-icon">
                  <img src="../assets/images/chuSan.jpg" alt="icon" />
                </div>
                <h3 class="h3 card-title">初三</h3>
                <p class="card-text">初中生活的结尾</p>
                <a href="#" class="card-link">
                  <span>了解详情</span>
                  <ion-icon name="chevron-forward-outline"></ion-icon>
                </a>
              </div>
            </li>
          </ul>
        </section>

        <!-- 老师
        
        
        ---

        -->
        <section class="service" id="service">
          <div class="container">
            <figure class="service-banner">
              <img
                src="../assets/images/ll.jpg"
                alt=""
                class="w-100"
                loading="lazy"
              />
            </figure>
            <div class="service-content">
              <p class="section-subtitle">老师</p>
              <h2 class="h2 section-title">那些年，教育我们的老师</h2>
              <ul class="service-list">
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <a href="#">
                    <h3 class="h3 service-item-title">
                      陈萍萍——我们永远的萍子酱
                    </h3>
                  </a>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <a href="#">
                    <h3 class="h3 service-item-title">李磊——最稳的老师</h3>
                  </a>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <a href="#">
                    <h3 class="h3 service-item-title">
                      陈杰——有趣（qǔ）的杰哥
                    </h3>
                  </a>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <a href="#">
                    <h3 class="h3 service-item-title">更多老师</h3>
                  </a>
                </li>
              </ul>
            </div>

            <figure class="service-banner">
              <img
                src="../assets/images/service-2.png"
                alt=""
                class="w-100"
                loading="lazy"
              />
            </figure>
            <div class="service-content">
              <p class="section-subtitle">Our services</p>
              <h2 class="h2 section-title">
                Best IT&technology service in your area
              </h2>
              <ul class="service-list">
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <h3 class="h3 service-item-title">Design& Development</h3>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <h3 class="h3 service-item-title">
                    Andriod Apps Development
                  </h3>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <h3 class="h3 service-item-title">Laravel Web Development</h3>
                </li>
                <li class="service-item">
                  <div class="service-item-icon">
                    <ion-icon name="checkmark-outline"></ion-icon>
                  </div>
                  <h3 class="h3 service-item-title">React Web Development</h3>
                </li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 
          BLOG


         -->
        <section class="blog" id="blog">
          <div class="container">
            <p class="section-subtitle">大事记</p>
            <h2 class="h2 section-title">回顾下初中生涯的经典时刻</h2>
            <ul class="blog-list">
              <!-- 第一个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <a href="#">
                      <img
                        src="../assets/images/junXun.jpg"
                        alt=""
                        loading="lazy"
                        class="w-100"
                      />
                    </a>
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <a href="#" class="blog-meta-link">军训</a>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2018-8-12"
                          >2018年8月12-13日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      <a href="#">军训——我们的第一次集体活动——初逢</a>
                    </h3>
                  </div>
                </div>
              </li>
              <!-- 第二个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <a href="#">
                      <img
                        src="../assets/images/art.jpg"
                        alt=""
                        loading="lazy"
                        class="w-100"
                      />
                    </a>
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <a href="#" class="blog-meta-link">艺术节</a>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2020-12-31"
                          >2020年12月31日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      <a href="#">我们的艺术节——《权御天下》</a>
                    </h3>
                  </div>
                </div>
              </li>
              <!-- 第三个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <a href="#">
                      <img
                        src="../assets/images/biYe.jpg"
                        alt=""
                        loading="lazy"
                        class="w-100"
                      />
                    </a>
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <a href="#" class="blog-meta-link">毕业季</a>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2022-7-12"
                          >2022年7月12日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      <a href="#"> 我们毕业啦 ——离别</a>
                    </h3>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </section>
        <!-- 

          NewsLetter



         -->

        <section class="newsletter" id="newsletter">
          <div class="container">
            <figure class="newsletter-banner">
              <img
                src="../assets/images/newsletter.png"
                alt="#"
                loading="lazy"
                class="w-100"
              />
            </figure>
            <div class="newsletter-content">
              <p class="section-subtitle">一封信</p>
              <h2 class="h2 section-title">四年同窗，留给你们的一封信</h2>
              <!-- 输入邮箱 关注 -->
              <form action="" class="newsletter-form">
                <input
                  type="email"
                  name="email"
                  required
                  placeholder="Enter your email address"
                  class="input-field"
                />

                <button
                  class="btn btn-primary"
                  onclick="location.href='./letter.html'"
                >
                  进入邮箱
                  <ion-icon name="chevron-forward-outline"></ion-icon>
                </button>
              </form>
            </div>
          </div>
        </section>
      </article>
    </main>

    <!-- footer -->

    <footer class="footer">
      <div class="footer-top">
        <div class="container">
          <div class="footer-brand">
            <a href="#" class="logo">
              <img src="../assets/images/bg.jpg" alt="logo" loading="lazy" />
            </a>
            <p class="section-text">
              腊八粥的保质期会越来越长，感谢同学们这四年来的鼎力协助和精诚合作。<br />
              本人庶竭驽钝，希望给大家留下回忆的地方
            </p>
            <div class="location-text">
              <div class="location-icon">
                <ion-icon name="location-outline"></ion-icon>
              </div>

              <address class="address">上海市浦东新区藿香路38号</address>
            </div>
          </div>

          <div class="quicklink-box">
            <p class="h3 quicklink-title">快速跳转</p>
            <ul class="quicklink-list">
              <li>
                <a href="#" class="quicklink">毕业视频</a>
              </li>
              <li>
                <a href="#" class="quicklink">预初</a>
              </li>
              <li>
                <a href="#" class="quicklink">初一</a>
              </li>
              <li>
                <a href="#" class="quicklink">初二</a>
              </li>
              <li>
                <a href="#" class="quicklink">初三</a>
              </li>
              <li>
                <a href="#" class="quicklink">老师</a>
              </li>
              <li>
                <a href="#" class="quicklink">大事记——军训</a>
              </li>
              <li>
                <a href="#" class="quicklink">大事记——艺术节</a>
              </li>
              <li>
                <a href="#" class="quicklink">大事记——毕业</a>
              </li>
              <li>
                <a href="#" class="quicklink">最后的一封信</a>
              </li>
            </ul>
          </div>

          <div class="contact">
            <p class="h3 contact-title">联系作者</p>
            <ul class="contact-list">
              <li class="contact-item">
                <div class="contact-icon">
                  <ion-icon name="mail-outline"></ion-icon>
                </div>
                <a href="mailto:1968988211@qq.com" class="contact-link"
                  >1968988211@qq.com</a
                >
              </li>
              <li class="contact-item">
                <div class="contact-icon">
                  <ion-icon name="logo-github"></ion-icon>
                </div>
                <a
                  href="https://github.com/Zhe-SH-CN/class8-v0.2.0"
                  class="contact-link"
                  >Class8-v0.2.0(开源仓库地址)</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <p class="copyright">
            &copy; 2022 <a href="#">Zhe-SH-CN</a> All Rights Reserved.
          </p>
          <ul class="social-list">
            <li>
              <a href="#" class="social-link"
                ><ion-icon name="logo-tiktok"></ion-icon>
              </a>
            </li>
            <li>
              <a href="#" class="social-link"
                ><ion-icon name="logo-microsoft"></ion-icon>
              </a>
            </li>
            <li>
              <a href="#" class="social-link"
                ><ion-icon name="logo-github"></ion-icon>
              </a>
            </li>
            <li>
              <a href="#" class="social-link"
                ><ion-icon name="logo-wechat"></ion-icon>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </footer>

    <!-- Go to Top -->
    <a href="#top" class="go-top active" data-go-top>
      <ion-icon name="chevron-up-outline"></ion-icon>
    </a>

    <!-- js -->
    <script src="../assets/js/script.js"></script>

    <!-- 图标 -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
